<template>
    <el-row>
        <el-col :span="8" class="logo">
            <img src="/public/logo.png" loading="lazy">
        </el-col>
        <el-col :span="8" class="title">H7-智慧仪表盘</el-col>
        <el-col :span="8" class="button">
            <el-button type="success" size="small">加入模板</el-button>
            <el-button type="success" size="small" color="#626aef">更多模板</el-button>
            <el-button type="warning" size="small" @click="preview">预览</el-button>
            <el-button type="primary" size="small" @click="save">保存</el-button>
        </el-col>
    </el-row>
</template>
<script setup lang="tsx">
import { ElMessage } from 'element-plus'
import {data,initData,device,draggable,parentWindow,pageGuid} from '@drag/store'
import {showMsg} from '@dashboard/utils'
import PreView from '@dashboard/render/src/index.vue'
import QRCode from "qrcode";
const preview = async()=>{
    if(device.value=='pc'){
        showMsg({
            title:'预览',
            component:{render(){return <PreView modelValue={data.value}/>}},
            beforeClose:()=>{ 
                draggable.value = true;
            }
        });
    }else if(device.value=='mobile'){
        let url = await QRCode.toDataURL(`${location.origin}/Html/Custom/Dashboard/previewBuild/preview.html?BusinessKey=${pageGuid}`)
        let style = {
            height: '268px',
            width:'268px',
            border: '1px solid #ddd',
            background: `url(${url})`,
            backgroundSize: 'cover',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center',
        }
        showMsg({
            title:'扫一扫预览',
            width: '270px',
            height: '305px',
            component:{render(){return <div style={style}></div>}},
            beforeClose:()=>{
                draggable.value = true;
            }
        });
    }
}
const save = ()=>{
    //保存数据
    let dataStr;
    //初始数据
    let initStr;
    switch(device.value){
        case 'pc':
            dataStr = JSON.stringify(data.value);
            initStr = JSON.stringify(initData);
            break;
        case 'mobile':
            let iframe:any = document.getElementById('mobile');
            initStr = JSON.stringify(data.value);
            dataStr = JSON.stringify(iframe.contentWindow.data.value);
            break;
    }
    
    if(dataStr===initStr){
        return ElMessage({
            message: '没有任何修改！',
            type: 'warning',
        })
    }
    if(parentWindow?.postMessage){
        parentWindow.postMessage({
            guid:pageGuid,
            type:'DashBoard',
            data:JSON.parse(dataStr)
        },{ targetOrigin: '*' });
        ElMessage({
            message: '保存成功！',
            type: 'success',
        })
    }else{
        ElMessage({
            message: '保存失败！',
            type: 'error',
        })
    }
}
</script>
<style scoped>
.el-row{height: 100%;}
.title{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 23px;
    user-select: none;
    background: linear-gradient(90deg, #42b883 0%, #42b883 0%, #0ebbd2 47.54%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.button{
    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: 20px;
}
.logo{
    display: flex;
    align-items: center;
    padding-left: 20px;
}
img{
    cursor:pointer;
    height: 40px;
}
</style>